<template>
  <div class="w-full h-screen flex justify-center items-center overflow-hidden">
    <div class="w-full h-screen flex flex-col flex-1 overflow-hidden">
      <div class="home-page flex pb-2 flex-col w-screen h-full">
        <div class="hp-title-bar">
          <NavBar :isHome="true"></NavBar>
        </div>
        <div class="hp-container flex overflow-hidden mx-2 flex-1 flex-row">
          <!-- <div class="hp-container-left h-full">
            <div class="hp-con-left-box flex flex-col h-full">
              <div class="hp-con-left-box-logo">
                <div class="logo-text">
                  <img src="/images/png/logo.png" style="height: 28px" alt="" />
                </div>
              </div>
              <div
                class="hp-con-left-box-menu flex flex-1 flex-col justify-between"
                v-if="currentMainMenu"
              >
                <ul class="hp-menu-container">
                  <li
                    class="hp-menu-item flex items-center"
                    :class="{
                      'hp-menu-item-selected': currentMainMenu.id == item.id,
                    }"
                    v-for="item in mainMenuList"
                    :key="item.id"
                    @click="handleChangeMenu(item)"
                  >
                    <span role="img" class="appIcon">
                      <svg-icon
                        :icon-class="item.icon"
                        width="16"
                        height="16"
                      />
                    </span>
                    <span class="menu-item-title flex-1">
                      {{ $t("homePage." + item.nameEn) }}
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div> -->
          <div class="hp-container-right flex flex-col flex-1">
            <!-- 哦买噶！这哥们把首页几个菜单的内容都写到了智能训练与验证菜单组件了，引起来歧义。 -->
            <MySpace :currentMainMenu="currentMainMenu"></MySpace>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import NavBar from "./common-components/nav-bar.vue";
import MySpace from "./common-components/my-space.vue";
export default {
  name: "HomePage",
  data() {
    return {
      currentMainMenu: null,
      activeName: "mySpace",
      dialogVisible: false,
    };
  },
  props: {
    isHome: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapState({
      avatarMenuList: (state) => state.homePage.avatarMenuList,
      mainMenuList: (state) => state.homePage.mainMenuList,
    }),
  },
  components: {
    NavBar,
    MySpace,
  },
  mounted() {
    if (!this.$route.query.module) {
      this.currentMainMenu = this.mainMenuList[0];
    } else {
      this.currentMainMenu = this.mainMenuList.filter(
        (item) => item.id == this.$route.query.module
      )[0];
    }
  },
  methods: {
    // 切换菜单
    handleChangeMenu(menu) {
      this.currentMainMenu = menu;
    },
  },
};
</script>

<style scoped lang="scss">
@import "../assets/styles/themeConfig/themeConfig.scss";
.home-page {
  background-color: var(--app-nav-bg);
  font-family: var(--ui-font-family);
  .hp-title-bar {
    height: 40px;
  }
  .hp-container {
    height: 0;
    background-color: var(--ui-component-background);
    background: url("../assets/images/main-bg.png") center no-repeat;
          background-size: 100% 100%;
    border: 1px solid var(--ui-border-color-base, #eaecf0);
    border-radius: 8px;
    .hp-container-left {
      border-right: 1px solid var(--ui-border-color-base);
      .hp-con-left-box {
        width: 300px;
        .hp-con-left-box-logo {
          width: auto;
          .logo-text {
            height: 28px;
            margin: 24px 0 12px;
            text-align: center;
          }
        }
        .hp-con-left-box-menu {
          overflow: hidden;
          -webkit-app-region: no-drag;
          .hp-menu-container {
            width: 100%;
            color: var(--ui-text-color);
            font-size: 14px;
            text-align: left;
            background: var(--ui-component-background);
            border-right: none;
            padding: 0 12px !important;
            box-shadow: none;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            padding: 0;
            line-height: 0;
            list-style: none;
            .hp-menu-item {
              height: 32px;
              line-height: 32px;
              margin: 4px 0;
              padding-right: 10px;
              padding-left: 10px !important;
              border-radius: 6px;
              white-space: nowrap;
              transition: all 0.3s ease; /* 添加过渡效果 */
              cursor: pointer;
              .menu-item-title {
                max-width: 100%;
                margin: 0 4px 0 6px;
                min-width: 0;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              &:hover {
                background-color: var(--ui-item-hover-bg);
              }
            }
            .hp-menu-item-selected {
              background-color: var(--ui-menu-item-active-bg);
            }
          }
        }
      }
    }
    .hp-container-right {
      width: 100%;
      min-width: 0;
    }
  }
}
</style>

